<template>
	<div class="mobile">
		<p class="text-lg">{{ $t('profile.modifyMobile') }}</p>

		<p class="flex gap-1 items-center text-t-3 text-sm">
			<base-icon class="icon" name="hint"></base-icon>
			{{ $t('mobile.contentSubtitle') + ' ' + fmtMobile(profileStore.userInfo?.mobile) }}
		</p>

		<div style="height: 20px"></div>
		<base-input
			v-model="code"
			type="code"
			:maxlength="6"
			:error="codeError"
			:label="$t('mobile.codePH')"
			clearable>
			<template #suffix>
				<base-code authorized :type="AccountType.mobile" :codeType="CodeType.updateEmailOrMobile" />
			</template>
		</base-input>
		<div style="height: 10px"></div>

		<account-tel class="mt-[10px]" v-model="mobile" />

		<div style="height: 10px"></div>
		<base-input
			v-model="newcode"
			type="code"
			:maxlength="6"
			:error="newcodeError"
			:label="$t('mobile.newcodePH')"
			clearable>
			<template #suffix>
				<base-code
					:type="AccountType.mobile"
					:codeType="CodeType.updateEmailOrMobile"
					:disabled="!isMobile(mobile)"
					:nameData="mobile" />
			</template>
		</base-input>
		<div style="height: 20px"></div>
		<base-button
			:disabled="submitDisabled"
			:loading="loading"
			block
			class="mb-10"
			round
			type="primary"
			@click="onSubmit">
			{{ $t('action.confirm') }}
		</base-button>
	</div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useProfileStore } from '@/store'
import { AccountType, CodeType } from '@/enums'
import { modifyEmailOrMobile } from '@/api/profile'
import { fmtMobile, isCode, isMobile, showError, showSuccess, t } from '@/utils'
import AccountTel from '@/components/account/account-tel/index.vue'
import { BaseButton, BaseCode, BaseIcon, BaseInput } from '@/components/base'

const profileStore = useProfileStore()

const mobile = ref('')
const emits = defineEmits(['close'])

const mobileError = computed(() =>
	mobile.value && !isMobile(mobile.value) ? t('error.mobile') : ''
)

const code = ref('')
const codeError = computed(() => (code.value && !isCode(code.value) ? t('error.code') : ''))

const newcode = ref('')
const newcodeError = computed(() =>
	newcode.value && !isCode(newcode.value) ? t('error.code') : ''
)

const submitDisabled = computed(
	() =>
		!mobile.value ||
		!!mobileError.value ||
		!code.value ||
		!!codeError.value ||
		!newcode.value ||
		!!newcodeError.value
)

const loading = ref(false)

const onSubmit = async () => {
	try {
		loading.value = true
		const params = {
			type: AccountType.mobile,
			codeType: CodeType.updateEmailOrMobile,
			nameData: mobile.value,
			code: code.value,
			newcode: newcode.value
		}
		await modifyEmailOrMobile(params)
		loading.value = false
		showSuccess(t('tip.saveSuccess'))
		await profileStore.getUserInfo()
		emits('close')
		resetDate()
	} catch (error: any) {
		loading.value = false
		showError(error)
	}
}

const resetDate = () => {
	mobile.value = ''
	code.value = ''
	newcode.value = ''
}
</script>
<style lang="scss" scoped></style>
